<template>
  <el-dialog title="共保信息详情" :visible.sync="open" width="1000px" append-to-body v-dialogDrag
             :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="form" :model="form" label-width="110px" :key="formKey">
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="共保信息"/>
        <el-table :data="coinsuranceList">
          <el-table-column label="共保人名称" align="center" prop="baoxianName"/>
          <el-table-column label="承保比例" align="center" prop="rate"/>
          <el-table-column label="项目负责人" align="center" prop="responsiblePerson"/>
          <el-table-column label="联系方式" align="center" prop="tel"/>
        </el-table>
      </el-card>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  getContractCoinsuranceList,
  getContractDetail,
  getContractPay,
  getContractPremium
} from "@/api/insurance/contract";

export default {
  name: "contractDetail",
  dicts: ['insure_type'],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      formKey: Math.random() * 100,
      form: {},
      planList: [],
      planListProxy: [],
      realList: [],
      coinsuranceList: [],
      realListProxy: [],
      open: false,
    }
  },
  methods: {
    openDialog(id) {
      this.formKey = Math.random() * 100
      this.open = true
      getContractCoinsuranceList(id).then(response => {
        this.coinsuranceList = response.data
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    openMap() {
    },
    handleView(row) {
      window.open(this.baseUrl + "/" + row.filePath, '_blank')
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-descriptions {
  &:not(:nth-child(1)) {
    margin-top: 20px;
  }

  .el-descriptions__title {
    display: flex;
    align-items: center;

    &::before {
      display: inline-block;
      width: 3px;
      height: 20px;
      margin-right: 10px;
      background-color: #409eff;
      content: '';
    }
  }

  .el-descriptions-item__container {
    margin: 0 10px;

    .no-colon {
      margin: 0;

      &::after {
        content: '';
      }
    }
  }
}
</style>
